<template>
  <div class="tab-wrapper" id="purchasePrice">
    <el-tabs v-model="activeName">
      <el-tab-pane label="供货价格列表" name="first">
        <search-form
          ref="search"
          :type="1"
          @handleSearch="handleSearch"
        ></search-form>
        <div class="table-wrapper">
          <div class="table-main">
            <div class="empty-header" v-show="activeHeader"></div>
            <div class="table-header" :class="[activeHeader ? 'active-header' : '']">
              <span class="title">
                供货价格列表{{ total === 0 ? "" : "（" + total + "）" }}
              </span>
              <div class="action-bar">
                <el-upload
                  v-show="showBtn"
                  class="upload-demo"
                  :action="uploadUrl"
                  multiple
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                >
                  <el-button size="mini" type="success">新建/导入</el-button>
                </el-upload>
                <el-button size="mini" v-show="showBtn" plain @click="handleExport"
                  >导出</el-button
                >
                <el-button
                  size="mini"
                  icon="el-icon-setting"
                  disabled
                  plain
                ></el-button>
              </div>
            </div>
            <el-table
              :data="tableData"
              border
              stripe
              style="width: 100%"
              highlight-current-row
              @selection-change="handleSelectionChange"
              :header-cell-style="{
                color: 'rgb(51, 51, 51)',
                fontSize: '14px',
                background: '#f3f3f3',
                fontWeight: 'normal'
              }"
            >
              <el-table-column
                type="selection"
                fixed
                width="55"
              ></el-table-column>
              <el-table-column
                v-for="(item, index) in headers"
                :label="item.label"
                :key="index"
                :width="item.width"
              >
                <template slot-scope="scope">
                  <template v-if="item.prop == 'goodsName'">
                    <el-link :underline="false" type="primary">
                      {{ scope.row[item.prop] }}
                    </el-link>
                  </template>
                  <template v-else>
                    <span>{{ scope.row[item.prop] }}</span>
                  </template>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="状态提醒" width="100">
                <template slot-scope="scope">
                  <el-tag type="success" effect="dark" size="mini">{{
                    scope.row.statusNotification
                  }}</el-tag>
                </template>
              </el-table-column>
              <!-- <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-link :underline="false" type="success">查看</el-link>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="bottom-page">
              <Pagination
                :total="total"
                :pageData="page"
                @handlePageChange="handlePageChange"
              ></Pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import SearchForm from "@/components/SearchForm/";
import { headers } from "./config";
const page = () => {
  return {
    page: 1,
    size: 10
  };
};
export default {
  name:'purchasePrice',
  components: { SearchForm },
  data() {
    return {
      activeName: "first",
      page: page(),
      total: 0, // 总条数
      tableData: [],
      headers,
      selections: [],
      form: {},
      uploadUrl: `/api/prices/excel`,
      activeHeader:false,
      distance_header:0,
      priceScrolled:0,
    };
  },
   mounted() {
    // 一次性计算赋值，减少滚动计算节点位置次数
    let header = document.querySelector(".table-header")
    let par = document.querySelector(".table-header").offsetParent
    console.log(par, 'pararar')
    if(par.nodeName.toLowerCase() == "body") {
      this.distance_header = header.offsetTop
    } else {
      while(par) {
        this.distance_header += par.offsetTop
        par = par.offsetParent
      }
    }
    if(this.distance_header != 0) {
      this.distance_header -= 72
    }
    this.$nextTick(function() {
      document
        .querySelector("#purchasePrice")
        .addEventListener("scroll", this.onScroll);
    });
    window.addEventListener("scroll", this.onScroll, true);
  },
  created() {
    this.init();
  },
  activated() {
    this.onScroll(this.priceScrolled)
  },
  computed:{
    showBtn(){
      return this.$store.state.app.showBtn
    }
  },
   watch:{
    activeHeader:function(newVal,oldVal){
        this.setTop(newVal)
    }
  },
  methods: {
     setTop(val){
       if(this.$route.name == 'purchasePrice') {
         if(document.querySelector('.el-table__fixed-header-wrapper')) {
          var adom = document.querySelector('.el-table__header-wrapper');
          var adom1 = document.querySelector('.el-table__fixed .el-table__fixed-header-wrapper'); //左边
          var adom1Body = document.querySelector('.el-table__fixed .el-table__fixed-body-wrapper');

          var adom2 = document.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper');
          var adom2Body = document.querySelector('.el-table__fixed-right .el-table__fixed-body-wrapper');

          var wid = document.querySelector('.el-table__fixed-header-wrapper').offsetWidth-100;
          var adom2header = document.querySelector('.el-table__fixed-right .el-table__header');
          if(val){
            adom.classList.add("apositiheader2");
            adom1.classList.add("apositiheader");
            adom1Body.classList.add("apositiheader2body");
            adom2.classList.add("apositiheader3");
            adom2Body.classList.add("apositiheader2body");
            adom2header.style.marginLeft = -wid + 'px'
          }else{
            adom.classList.remove("apositiheader2");
            adom1Body.classList.remove("apositiheader2body");
            adom1.classList.remove("apositiheader");
            adom2.classList.remove("apositiheader3");
            adom2Body.classList.remove("apositiheader2body");
            adom2header.style.marginLeft = 0 + 'px'
          }
        }
       }
    },
    // 查询按钮事件
    handleSearch(form) {
      this.page = page();
      this.form = form;
      this.init();
    },
    handlePageChange(pages) {
      this.page = pages;
      this.init();
    },
    // 列表多选
    handleSelectionChange(element) {
      this.selections = element;
    },
    // 请求接口获取数据
    init() {
      const params = {
        size: this.page.size,
        page: this.page.page <= 0 ? 0 : this.page.page - 1,
        ...this.form,
        sort:"id"
      };
      this.$http("/prices", params).then(res => {
        this.tableData = res.records ? res.records : [];
        this.total = isNaN(res.totalElements) ? 0 : Number(res.totalElements);
      });
    },
    // 导出
    handleExport() {
      const params = {
        ...this.page,
        page:this.page.page -1
      };
      window.open(
        "http://web.tmall.pingyee.com.cn/" +
          "/prices/excel?" +
          this.common.createUrl(params)
      );
    },
    // 导入后 成功&失败 回调
    handleSuccess(res) {
      this.$message({
        message: "导入成功！",
        type: "success",
        offset: 100
      });
    },
    onScroll(aliveScroll) {
      if(this.$route.name == "purchasePrice") {
        if(aliveScroll && !isNaN(aliveScroll)) {
        document.querySelector(".app-wrapper").scrollTop = aliveScroll
      }
      const scrolled = document.querySelector(".app-wrapper").scrollTop;
      this.priceScrolled = scrolled
      // if (scrolled >= 258) {
      //   this.activeHeader = true
      // } else {
      //   this.activeHeader = false
      // }
      }
    },
    handleError(err) {
      this.$message({
        message: "导入失败！",
        type: "error",
        offset: 100
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-wrapper {
  background-color: #fff;
  .table-wrapper {
    padding: 10px;
    background-color: #f2f2f2;
    .upload-demo {
      display: inline-block;
      margin-right: 10px;
    }
    .table-main {
      background-color: #fff;
      padding-bottom: 45px;
      .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 10px;
        .title {
          font-size: 16px;
        }
      }
      .bottom-page {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        z-index: 200;
        left: 196px;
        right: 29px;
      }
    }
  }
}
</style>

<style scoped>
/* element ui css */
.tab-wrapper >>> .el-tabs__item.is-active {
  color: #01c901;
  font-size: 12px;
  text-align: center;
  width: 84px;
  box-sizing: border-box;
  padding: 0 12px;
}
 .active-header {
    position: fixed;
    top:72px;
    left: 194px;
    right: 29px;
    background-color: #fff;
    z-index: 200;
  }
.tab-wrapper >>> .el-tabs__active-bar {
  background-color: #01c901;
}
.tab-wrapper >>> .el-table__body,
.table-main >>> .el-table__body .el-link {
  font-size: 12px;
}
.tab-wrapper >>> .el-table .cell {
  line-height: 14px;
}
.tab-wrapper >>> .el-table td,
.table-main >>> .el-table th {
  padding: 8px 0;
}
</style>
